<template>
  <el-row class="approve-flow-path">
    <div v-if="list.length" class="courses-box">
      <span class="bg-line"></span>
      <el-row :class="'courses-container'">
        <div v-for="(item, index) in list" :key="index">
          <div class="inter-course-detail-box">
            <el-col :span="5" class="user-icon-box">
              <div class="icon-box">
                <!-- :class="['iconfont course-icon icon-rili course-arrage']" -->
                <span
                  :class="['iconfont course-icon course-arrage']"
                ></span>
              </div>
              <div class="user-box">
                <p class="user-name">{{ item.operator }}</p>
                <!-- <span class="user-time">{{ item.createDate | getTime }}</span>
                <span class="user-date">{{ item.createDate | getDate }}</span> -->
              </div>
            </el-col>
 
            <el-col :span="19" :class="'course-main-box'">
              <span class="iconfont icon-icon-top-copy main-box-icon"></span>
              <el-row class="course-detail-container passed-detail">
                <el-col :span="24" class="info-item info-item-flex">
                  <span class="info-item-tip flow-state">{{ item.taskName }} </span>
                </el-col>
                <template v-if="!(!index && item.taskName === 'end')">
                  <el-col v-if="item.taskName !== '申请人'" :span="24" class="info-item info-item-flex">
                    <span class="info-item-tip">审批结果 </span>
                    <span class="sign">:</span>
                    <p class="info-item-txt">{{ item.flowState }}</p>
                    <!-- <p class="info-item-txt">{{ flowDict[item.flowState] }}</p> -->
                  </el-col>
                  <el-col :span="24" class="info-item info-item-flex">
                    <span class="info-item-tip">备注 </span>
                    <span class="sign">:</span>
                    <div class="info-item-txt" v-html="`${item.comment || ''}`.replaceAll(/\n/g,'<br/>')"></div>
                    <!-- <p class="info-item-txt">{{ item.comment }}</p> -->
                  </el-col>
                  <el-col :span="24" class="info-item info-item-flex">
                    <span class="info-item-tip">{{ item.taskName !== '申请人'? '审批时间': '申请时间' }} </span>
                    <span class="sign">:</span>
                    <p class="info-item-txt">{{ item.operatorDate }}</p>
                  </el-col>
                </template>
              </el-row>
            </el-col>
          </div>
        </div>
      </el-row>
    </div>
    <el-empty v-else description=""></el-empty>
  </el-row>
</template>
<script>
export default {
  props: {
    list: {
      type: [Object, Array],
      default: () => {
        return [];
      },
    },
  },
  methods: {
    filterSecond (val) {
      if(!val) return val
      return val.slice(0, 16);
    },
  },
  filters: {
    getTime: function (val) {
      let tempStr = "";
      if (val) {
        tempStr = val.substring(val.indexOf(" "), val.lastIndexOf(":"));
      }
      return tempStr;
    },
    getDate: function (val) {
      let tempStr = "";
      if (val) {
        tempStr = val.substring(0, val.indexOf(" "));
      }
      return tempStr;
    },
  },
  data() {
    return {
      // flowDict: {
      //   flow_state_01: '待审批',
      //   flow_state_02: '当前节点审批完成',
      //   flow_state_03: '审批完成',
      //   flow_state_04: '撤回',
      //   flow_state_05: '驳回',
      //   flow_state_06: '单据已废弃',
      // }
    };
  },
  beforeMount() {
    
  }
};
</script>
<style lang="scss">
@import "~@/assets/scss/mixins.scss";
.approve-flow-path {
  padding: 20px 20px 0 20px;
  background-color: #fff;
  margin-bottom: 20px;
  height: auto;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  max-height: 600px;
  overflow-y: scroll;
  .inter-course-detail-box {
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .course-main-box {
    background-color: #fafafa;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 15px;
    position: relative;
  }
  .wrap-text{
    background: none !important;
    border: none !important;
  }
  .info-item-flex {
    display: flex;
    align-items: baseline;
    .detail-title {
      flex: 1;
      text-align: right;
    }
  }
  .info-item-txt {
    font-size: 14px;
    color: #636363;
    padding-left: 10px;
    height: auto;
  }
  .courses-box {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 0;
  }
  .detail-title {
    font-size: 14px;
    font-weight: bold;
    color: #00A1D6;
    width: 100%;
    height: 35px;
    line-height: 35px;
    flex: 1;
    text-align: right;
  }
  .bg-line {
    display: inline-block;
    width: 4px;
    height: 100%;
    overflow: hidden;
    background: #ffe9dd;
    float: left;
    position: absolute;
    top: 66px;
    left: 35px;
  }
  .courses-container {
    width: 100%;
    padding-top: 25px;
    height: auto;
    overflow: hidden;
    border: 1px solid #eee;
  }
  .info-item-tip {
    min-width: 120px !important;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    text-align: left;
    font-size: 14px;
    color: #636363;
  }
  .user-icon-box {
    display: flex;
    .user-box {
      min-width: 80px;
      float: left;
      height: auto;
      padding: 0 0 0 10px;
      max-width: 170px;
      span {
        display: block;
        text-align: left;
        width: 80px;
        line-height: 22px;
        font-size: 12px;
      }
      .user-name {
        font-family: "PingFang SC";
        font-size: 12px;
        line-height: 24px;
        text-align: left;
        color: #636363;
        padding-top: 20px;
        padding-right: 10px;
      }
      .user-time,
      .user-date {
        font-size: 12px;
        color: #535353;
      }
      .user-time {
        font-weight: bold;
      }
    }
    @media (max-width: 1600px) {
      .user-box {
        width: 80px;
      }
    }
    .icon-box {
      float: left;
      margin-left: 23px;
      margin-top: 18px;
      .course-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        display: inline-block;
        font-size: 20px;
        text-align: center;
        line-height: 20px;
        border: 3px solid #ffe9dd;
      }
      .course-arrage {
        background-color: #00c57d;
      }
      .course-tran-sign {
        background-color: #ff525d;
      }
    }
  }
  .flow-state {
    font-weight: 700;
    font-size: 16px;
  }
}
</style>
